<template>
	<view class="navigation flex--row" role="menubar" aria-label="导航栏">
		<view class="nav-function text--main-dark">
			<slot v-slot="Function">
				
			</slot>
		</view>
		<view class="nav-information flex--row" >
			<navigator url="/pages/edit/edit" role="button" aria-label="个人资料" >
				<image class="icon--middle" src="@/static/global/user.svg" alt="用户信息"></image>
			</navigator>
			<navigator url="/pages/record/record" role="button" aria-label="记录瞬间">
				<image src="@/static/magic-wand.svg" alt="拍摄照片" class="icon--middle"></image>
			</navigator>
			<view class="role-mark text--thirdary-dark" role="presentation" :aria-label="'认证身份'+roleText">
				{{roleText}}
			</view>
		</view>
	</view>
</template>

<script>
	import {checkRole} from "@/core/app.js"
	import * as Role from "@/core/constant/role.js"
	export default{
		computed:{
			roleText(){
				let role =  checkRole()
				switch(role){
					case Role.ROLE_BLIND:
						return "盲人"
					case Role.ROLE_VOLUNTEER:
						return "志愿"
					default:
						return "未认证"
				}	
			}
		}
	}
</script>

<style lang="scss">
	.text--main-dark{
		font-size: 24px;
		font-weight: 600;
		color:#333;
	}
	
	
	.text--thirdary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	
	.navigation{
		width:100%;
		justify-content: space-between;
		align-items: center;
		.nav-information{
			justify-content: flex-end;
			align-items: center;
		}
		
		.nav-function{
			flex:1;
		}
	}
	
	.role-mark{
		border-radius: 10px;
		padding:4px 8px;
		background:$main-color;
		color:#fff;
	}
</style>